<template>
	<view class="part-container">
		<navBar :title='title'></navBar>
		<view class="part-main">
			<scrollView
			  class='scroll'
			  :scrollBoolean="listData.total" 
				:scrollTop="listData.scrollTop"
				:scrollLoad="listData.total > listData.list.length" 
				:refresherRriggered="listData.refresherRriggered"
				@refresherrefresh="refresherrefresh" 
				@scrolltolower="scrolltolower">
				<view class="main-list">
					<view class="list-item"
					 v-for="(item, index) in listData.list"
					 :key="index"
					 @click="jumpItem(item)">
						<view class="item-time">{{ item.updateTime }}</view>
						<view class="item-content">
							<view class="content-top">
								<view class="top-left">
									<view class="left-title">{{ item.positionName }}</view>
									<view class="left-type">
										<text v-if="item.onlineOffline === 'OFFLINE'">线下</text>
										<text v-if="item.onlineOffline === 'ONLINE'">线上</text>
									</view>
								</view>
								<view class="top-right">
									<text class="col-ff8" v-if="item.state === 'OTHER_CONFIRMS'">待对方接单</text>
									<text class="col-ff8" v-if="item.state === 'PENDING_ORDERS'">待付款</text>
									<!-- <text class="col-6ac" v-if="item.status === '1'">待向平台付款</text> -->
									<text class="col-8c8" v-if="item.state === 'HAVE_IN_HAND'">进行中待完成</text>
									<text class="col-6ac" v-if="item.state === 'COMPLETED'">待确认</text>
									<!-- <text class="col-8c8" v-if="item.status === '4'">已完成</text> -->
									<text class="col-8c8" v-if="item.state === 'EVALUATED' || item.state === 'COMPLETE_OK' && item.scoreForEmp === null">待评价</text>
									<text class="col-8c8" v-if="item.state === 'CANCELLED'">已取消</text>
									<text class="col-ff2" v-if="item.state === 'INVALID'">已失效</text>
									<text class="col-6ac" v-if="item.state === 'COMPLETE_OK'">已完成</text>
								</view>
							</view>
							<view class="content-time">
								<view class="time-sj">{{ item.price }}/天</view>
								<view class="time-ts">{{ item.count }}天</view>
							</view>
							<view :class="item.state !== 'INVALID' || item.state !== 'CANCELLED' ? 'content-info pd-bt24' : 'content-info'">
								<image :src="httpUrl+'/app/file/viewFile?fileId='+item.empUserAvatar" mode=""></image>
								<view class="info-user">
									<view class="user-name">{{ item.bossUserName }}</view>
									<view class="user-type">服务者·{{ item.empUserName }}</view>
								</view>
							</view>
						<!-- 	<view class="content-bt" v-if="item.state ==='COMPLETE_OK' && item.scoreForEmp !== null">
								<view class="bt-pf">
									<view class="pf-one">  我的评价<uni-rate class="mg-lf20" readonly :value="item.scoreForBoss" color="#bbb" active-color="#6B64D3" /></view>
									<view class="pf-one">服务者评价<uni-rate class="mg-lf20" readonly :value="item.scoreForEmp" color="#bbb" active-color="#6B64D3" /></view>
								</view>
							</view> -->
							<view class="content-bt">
								<view class="bt-pf" v-if="item.state ==='COMPLETE_OK' && item.scoreForEmp !== 0">
									<view class="pf-one">  我的评价<uni-rate class="mg-lf20" readonly :value="item.scoreForBoss" color="#bbb" active-color="#6B64D3" /></view>
									<view class="pf-one">服务者评价<uni-rate class="mg-lf20" readonly :value="item.scoreForEmp" color="#bbb" active-color="#6B64D3" /></view>
								</view>
								<view class="bt-qx" v-if="item.state === 'OTHER_CONFIRMS'"><text  @click.stop="jump(1, item)">取消</text></view>
								<view class="bt-qx" v-if="item.state === 'PENDING_ORDERS'"> <text class="mg-rt10 one"  @click.stop="jump(0, item)">付款</text> <text  @click.stop="jump(1, item)">取消</text></view>
								<view class="bt-qx" v-if="item.state === 'HAVE_IN_HAND'" @click.stop="jump(2, item)"><text>催单</text></view>
								<view class="bt-qfk" v-if="item.state === 'COMPLETED'" @click.stop="jump(3, item)"><text>确认完成</text></view>
								<!-- <view class="bt-qfk" v-if="item.state === '3'" @click="jump(2)"><text>同意付款</text></view> -->
								<view class="bt-qx" v-if="item.state === 'EVALUATED' || item.state === 'COMPLETE_OK' && item.scoreForEmp === 0"  @click.stop="jump(4, item)"><text>去评价</text></view>
							</view>
						</view>
					</view>
				</view>
				
			</scrollView>
			<uni-popup ref='pjRef'>
				<view class="pj-content">
					<view class="content-main">
						<view class="content-title">评价打分</view>
						<uni-rate :value="pjNum" color="#bbb" @change="onChange" active-color="#6B64D3" />
					</view>
					<view class="content-btn" @click.stop="jumpPj">确认</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script setup>
import navBar from '@/components/navBar.vue'	
import { ref, reactive, onMounted } from "vue"
import { onLoad } from '@dcloudio/uni-app'
import commonNavBar from "@/components/commonNavBar.vue";
import scrollView from "@/components/scrollView.vue";
import { getStatusBarHeight } from '@/utils/common/common.js'
import { showModal, showToast } from '@/utils/toast.js'
import api from '@/utils/api/recruit.js'
onMounted(_ => {
	getList()
	
})
onLoad(_ => {
	uni.$on('refshz', res=> {
		listData.list = []
		listData.pageInfo.pageNo = 1
		listData.pageInfo.pageSize = 10 
		getList()
	})
})
const pjNum = ref(3) // 评价分数
const pjRef = ref(null)
const httpUrl = getApp().globalData.baseUrl
const barHeight = ref(null)	
const title = ref('工单管理')
const listData = reactive({
	total: 0, //	总条数
	scrollTop: 0, //	滚动区域
	refresherRriggered: false, //	下拉状态
	pageInfo: { pageNo: 1, pageSize: 10, queryType: 'BOSS' },
	list: []
})
// 刷新
const refresherrefresh = _ => {
	listData.refresherRriggered = true;
	listData.list = [];
	listData.pageInfo.pageNo = 1
	listData.pageInfo.pageSize = 10 
	getList();
}
// 触底事件
const scrolltolower = _ => {
	if (listData.list.length >= listData.total) return false;
		listData.pageInfo.pageNo++;
		getList();	
}
// 获取列表
const getList = async _ => {
	const res = await api.queryAppWorkOrder(listData.pageInfo)
	listData.list = listData.list.concat(res.data.list);
	listData.total = res.data.total;
	listData.refresherRriggered = false;
}
let info = ref(null)
// 按钮操作
const jump = (index, val) => {
	info.value = val
	let id = val.id
	if(index === 0) {
		let datas = {
			gzType: 0,
			...val
		}
		uni.navigateTo({ url:`/pages/parttimeJob/details?data=${JSON.stringify(datas)}` })
	} else if(index === 2) {
		let ids = `C2C${val.empUserId}`
		uni.navigateTo({
			url:`/pages/TUIKit/components/TUIChat/index?conversationID=${ids}&userId=${val.empUserId}&zId=${val.id}&messageType=${'boss'}`
		})
	} else if(index === 1) {
		cancelOrder(id, 'CANCELLED', '是否取消该订单' )
	} else if(index === 3) {
		cancelOrder(id, 'EVALUATED', '是否确认完成改订单' )
	} else if(index === 4) {
		pjRef.value.open('center')
	}
}
// 分数
const onChange = (e) => {
	pjNum.value = e.value
}
// 修改订单状态
const cancelOrder = (id, state, content) => {
	showModal(content, true).then(async res=> {
		if(res.confirm){
			let data = {
				id: id,
				state: state
			}
			const ress = await api.updateWorkOrderState(data)
			if(ress.code === 200) {
				showToast(ress.msg)
				listData.list = []
				listData.pageInfo.pageNo = 1
				listData.pageInfo.pageSize = 10 
				getList()
			}
		}
	})
}
// 评价
const jumpPj = async _ => {
	let data = {
		id: info.value.id,
		state: 'COMPLETE_OK',
		empUserId: info.value.empUserId,
		score: pjNum.value
	}
	const res = await api.updateWorkOrderScoring(data)
	pjRef.value.close()
	showToast(res.msg)
	listData.list = []
	listData.pageInfo.pageNo = 1
	listData.pageInfo.pageSize = 10 
	getList()
}
// 点击详情
const jumpItem = item => {
	let datas = {
		gzType: 2,
		...item
	}
	uni.navigateTo({
		url: `/pages/parttimeJob/details?data=${JSON.stringify(datas)}`
	})
}
</script>

<style lang="scss">
.pd-bt24 {  padding-bottom: 24rpx; box-sizing: border-box;}	
.col-ff8 { color: #FF8C00; }	
.col-6ac { color: #6AC922; }	
.col-8c8 { color: #8C8C8C; }	
.col-ff2 { color: #FF263F; }	
.pj-content{
	padding: 20rpx;
	background: #fff;
	border-radius: 16rpx;
	.content-main{
		display: flex;
		// align-items: center;
		flex-direction: column;
		.content-title{
			text-align: left;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 24rpx;
			// color: #6B64D3;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-left: 12rpx;
		}
	}
	.content-btn{
		padding: 6rpx 16rpx;
		box-sizing: border-box;
		background: #6B64D3;
		border-radius: 10rpx;
		color: #fff;
		margin-top: 16rpx;
		text-align: center;
	}
}
.part-container{
	height: 100vh;
	.part-main{
		height: calc(100% - 80rpx);
		overflow: hidden;
		padding: 24rpx;
		box-sizing: border-box;
		.scroll{
			height: 100%;
			.main-list{
				height: 100%;
				.list-item{
					.item-time{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 24rpx;
						color: #8C8C8C;
						line-height: 36rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
						margin: 24rpx 0 12rpx 0;
					}
					.item-content{
						padding: 24rpx;
						border: 1rpx solid rgba(107, 100, 211, 1);
						border-radius: 24rpx;
						background: #FFFFFF;
						.content-top{
							display: flex;
							align-items: center;
							justify-content: space-between;
							.top-left{
								display: flex;
								align-items: center;
								.left-title{
									font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
									font-weight: normal;
									font-size: 36rpx;
									color: #262626;
									line-height: 54rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
								}
								.left-type{
									padding: 6rpx 16rpx;
									box-sizing: border-box;
									font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
									font-weight: normal;
									font-size: 24rpx;
									color: #8C8C8C;
									line-height: 36rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
									background: #F4F6FA;
									border-radius: 8rpx 8rpx 8rpx 8rpx;
									margin-left: 12rpx;
								}
							}
							.top-right{
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 28rpx;
								line-height: 42rpx;
								text-align: right;
								font-style: normal;
								text-transform: none;
							}
						}
						.content-time{
							margin-top: 12rpx;
							display: flex;
							align-items: center;
							.time-money{
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 32rpx;
								color: #6B64D3;
								line-height: 48rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
							.time-ts{
								padding: 6rpx 16rpx;
								box-sizing: border-box;
								background: #E4E2FC;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 24rpx;
								color: #6B64D3;
								line-height: 36rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								margin-left: 12rpx;
							}
						}
						.content-info{
							display: flex;
							align-items: center;
							margin-top: 28rpx;
							image{
								width: 96rpx;
								height: 96rpx;
								border-radius: 50%;
							}
							.info-user{
								margin-left: 16rpx;
								.user-name{
									font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
									font-weight: normal;
									font-size: 36rpx;
									color: #262626;
									line-height: 54rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
								}
								.user-type{
									margin-top: 8rpx;
									font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
									font-weight: normal;
									font-size: 28rpx;
									color: #8C8C8C;
									line-height: 42rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
								}
							}
						}
						.content-bt{
							padding-top: 24rpx;
							border-radius: 0rpx 0rpx 0rpx 0rpx;
							border-top: 2rpx solid #F4F6FA;
							display: flex;
							align-items: center;
							// justify-content: flex-end;
							.bt-qx{
								width: 100%;
								// width: 160rpx;
								display: flex;
								justify-content: flex-end;
							
								text{
									align-items: center;
									background: #E4E2FC;
									border-radius: 32rpx 32rpx 32rpx 32rpx;
									padding: 11rpx 25rpx;
									box-sizing: border-box;
									font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
									font-weight: normal;
									font-size: 28rpx;
									color: #6B64D3;
									line-height: 42rpx;
									text-align: center;
									font-style: normal;
									text-transform: none;
								}
								.one{
									background: #6B64D3;
									color: #fff;
								}
							}
							.bt-qfk{
								width: 100%;
								// width: 160rpx;
								display: flex;
								justify-content: flex-end;
								align-items: center;
							
								text{
									background: #6B64D3;
									border-radius: 32rpx 32rpx 32rpx 32rpx;
									padding: 11rpx 25rpx;
									box-sizing: border-box;
									font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
									font-weight: normal;
									font-size: 28rpx;
									color: #fff;
									line-height: 42rpx;
									text-align: center;
									font-style: normal;
									text-transform: none;
								}
								
							}
							.bt-pf{
								.pf-one{
									display: flex;
									align-items: center;
								}
								.pf-one:nth-child(1){
									margin-left: 25rpx;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
